<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迷宫探险</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            color: white;
            padding: 20px;
        }
        
        .container {
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            max-width: 95%;
            width: 800px;
            text-align: center;
        }
        
        h1 {
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            color: #ffcc00;
        }
        
        .game-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            font-size: 18px;
            background-color: rgba(0, 0, 0, 0.4);
            padding: 10px 20px;
            border-radius: 10px;
        }
        
        .stats {
            display: flex;
            gap: 20px;
        }
        
        .maze-container {
            position: relative;
            margin: 0 auto;
            overflow: auto;
            max-width: 100%;
        }
        
        canvas {
            background-color: #2c3e50;
            border-radius: 8px;
            display: block;
            margin: 0 auto;
            max-width: 100%;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }
        
        .controls {
            margin-top: 25px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }
        
        .button-row {
            display: flex;
            gap: 15px;
        }
        
        button {
            padding: 12px 25px;
            font-size: 16px;
            background: linear-gradient(to bottom, #ffcc00, #ff9900);
            color: #1a2a6c;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
            background: linear-gradient(to bottom, #ffdd22, #ffaa22);
        }
        
        button:active {
            transform: translateY(1px);
        }
        
        .instructions {
            margin-top: 25px;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            text-align: left;
            font-size: 14px;
        }
        
        .instructions h3 {
            margin-bottom: 10px;
            color: #ffcc00;
        }
        
        .win-message {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.9);
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 0 30px rgba(255, 204, 0, 0.7);
            z-index: 10;
            animation: fadeIn 0.5s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .difficulty {
            margin: 15px 0;
        }
        
        select {
            padding: 8px 15px;
            border-radius: 8px;
            background-color: #2c3e50;
            color: white;
            border: 2px solid #ffcc00;
        }
        
        @media (max-width: 600px) {
            .button-row {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            button {
                padding: 10px 20px;
                font-size: 14px;
            }
            
            .game-info {
                flex-direction: column;
                gap: 10px;
            }
            
            .stats {
                justify-content: space-around;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>迷宫探险</h1>
        
        <div class="game-info">
            <div class="stats">
                <div>时间: <span id="timer">0</span>秒</div>
                <div>移动: <span id="moves">0</span>步</div>
            </div>
            <div class="difficulty">
                <select id="difficulty">
                    <option value="easy">简单</option>
                    <option value="medium" selected>中等</option>
                    <option value="hard">困难</option>
                </select>
            </div>
        </div>
        
        <div class="maze-container">
            <canvas id="mazeCanvas" width="500" height="500"></canvas>
            <div id="winMessage" class="win-message">
                <h2>恭喜你成功走出迷宫！</h2>
                <p>用时: <span id="winTime">0</span> 秒</p>
                <p>移动步数: <span id="winMoves">0</span></p>
                <button id="playAgain">再玩一次</button>
            </div>
        </div>
        
        <div class="controls">
            <div class="button-row">
                <button id="upBtn">↑</button>
            </div>
            <div class="button-row">
                <button id="leftBtn">←</button>
                <button id="downBtn">↓</button>
                <button id="rightBtn">→</button>
            </div>
            <div class="button-row">
                <button id="newGameBtn">新游戏</button>
            </div>
        </div>
        
        <div class="instructions">
            <h3>游戏说明</h3>
            <p>使用方向键或屏幕上的按钮移动红色玩家方块，从左上角起点到达右下角终点。使用WASD键也可以移动。</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('mazeCanvas');
            const ctx = canvas.getContext('2d');
            const timerElement = document.getElementById('timer');
            const movesElement = document.getElementById('moves');
            const upBtn = document.getElementById('upBtn');
            const downBtn = document.getElementById('downBtn');
            const leftBtn = document.getElementById('leftBtn');
            const rightBtn = document.getElementById('rightBtn');
            const newGameBtn = document.getElementById('newGameBtn');
            const difficultySelect = document.getElementById('difficulty');
            const winMessage = document.getElementById('winMessage');
            const winTime = document.getElementById('winTime');
            const winMoves = document.getElementById('winMoves');
            const playAgainBtn = document.getElementById('playAgain');
            
            // 游戏参数
            let cellSize = 25;
            let rows, cols;
            let maze = [];
            let player = { x: 0, y: 0 };
            let end = { x: 0, y: 0 };
            let moves = 0;
            let timer = 0;
            let timerInterval;
            
            // 根据难度设置迷宫大小
            function setDifficulty() {
                const difficulty = difficultySelect.value;
                switch(difficulty) {
                    case 'easy':
                        rows = 10;
                        cols = 10;
                        cellSize = 40;
                        break;
                    case 'medium':
                        rows = 15;
                        cols = 15;
                        cellSize = 30;
                        break;
                    case 'hard':
                        rows = 20;
                        cols = 20;
                        cellSize = 22;
                        break;
                }
                canvas.width = cols * cellSize;
                canvas.height = rows * cellSize;
            }
            
            // 初始化游戏
            function initGame() {
                setDifficulty();
                generateMaze();
                player = { x: 0, y: 0 };
                end = { x: cols - 1, y: rows - 1 };
                moves = 0;
                timer = 0;
                movesElement.textContent = moves;
                timerElement.textContent = timer;
                
                // 清除之前的计时器
                if (timerInterval) clearInterval(timerInterval);
                
                // 开始计时
                timerInterval = setInterval(() => {
                    timer++;
                    timerElement.textContent = timer;
                }, 1000);
                
                // 隐藏胜利消息
                winMessage.style.display = 'none';
                
                drawMaze();
            }
            
            // 使用深度优先搜索生成迷宫
            function generateMaze() {
                // 初始化迷宫（所有墙都存在）
                maze = [];
                for (let y = 0; y < rows; y++) {
                    maze[y] = [];
                    for (let x = 0; x < cols; x++) {
                        maze[y][x] = {
                            top: true,
                            right: true,
                            bottom: true,
                            left: true,
                            visited: false
                        };
                    }
                }
                
                // 从随机点开始生成
                const stack = [];
                const startX = Math.floor(Math.random() * cols);
                const startY = Math.floor(Math.random() * rows);
                stack.push([startX, startY]);
                maze[startY][startX].visited = true;
                
                while (stack.length > 0) {
                    const [x, y] = stack[stack.length - 1];
                    const directions = [];
                    
                    // 检查四个方向的邻居
                    if (y > 0 && !maze[y-1][x].visited) directions.push([0, -1, 'top', 'bottom']);
                    if (x < cols-1 && !maze[y][x+1].visited) directions.push([1, 0, 'right', 'left']);
                    if (y < rows-1 && !maze[y+1][x].visited) directions.push([0, 1, 'bottom', 'top']);
                    if (x > 0 && !maze[y][x-1].visited) directions.push([-1, 0, 'left', 'right']);
                    
                    if (directions.length > 0) {
                        const [dx, dy, wall1, wall2] = directions[Math.floor(Math.random() * directions.length)];
                        const nx = x + dx;
                        const ny = y + dy;
                        
                        // 移除墙壁
                        maze[y][x][wall1] = false;
                        maze[ny][nx][wall2] = false;
                        
                        maze[ny][nx].visited = true;
                        stack.push([nx, ny]);
                    } else {
                        stack.pop();
                    }
                }
            }
            
            // 绘制迷宫
            function drawMaze() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 绘制迷宫墙壁
                ctx.strokeStyle = '#ffffff';
                ctx.lineWidth = 2;
                
                for (let y = 0; y < rows; y++) {
                    for (let x = 0; x < cols; x++) {
                        const cell = maze[y][x];
                        const xPos = x * cellSize;
                        const yPos = y * cellSize;
                        
                        if (cell.top) {
                            ctx.beginPath();
                            ctx.moveTo(xPos, yPos);
                            ctx.lineTo(xPos + cellSize, yPos);
                            ctx.stroke();
                        }
                        
                        if (cell.right) {
                            ctx.beginPath();
                            ctx.moveTo(xPos + cellSize, yPos);
                            ctx.lineTo(xPos + cellSize, yPos + cellSize);
                            ctx.stroke();
                        }
                        
                        if (cell.bottom) {
                            ctx.beginPath();
                            ctx.moveTo(xPos, yPos + cellSize);
                            ctx.lineTo(xPos + cellSize, yPos + cellSize);
                            ctx.stroke();
                        }
                        
                        if (cell.left) {
                            ctx.beginPath();
                            ctx.moveTo(xPos, yPos);
                            ctx.lineTo(xPos, yPos + cellSize);
                            ctx.stroke();
                        }
                    }
                }
                
                // 绘制终点
                ctx.fillStyle = '#4CAF50';
                ctx.fillRect(end.x * cellSize + 2, end.y * cellSize + 2, cellSize - 4, cellSize - 4);
                
                // 绘制玩家
                ctx.fillStyle = '#FF5252';
                ctx.beginPath();
                ctx.arc(
                    player.x * cellSize + cellSize / 2,
                    player.y * cellSize + cellSize / 2,
                    cellSize / 2 - 3,
                    0,
                    Math.PI * 2
                );
                ctx.fill();
            }
            
            // 移动玩家
            function movePlayer(dx, dy) {
                const newX = player.x + dx;
                const newY = player.y + dy;
                
                // 检查是否超出边界
                if (newX < 0 || newX >= cols || newY < 0 || newY >= rows) {
                    return false;
                }
                
                // 检查是否有墙壁阻挡
                if (dx === -1 && maze[player.y][player.x].left) return false; // 向左
                if (dx === 1 && maze[player.y][player.x].right) return false; // 向右
                if (dy === -1 && maze[player.y][player.x].top) return false; // 向上
                if (dy === 1 && maze[player.y][player.x].bottom) return false; // 向下
                
                // 移动玩家
                player.x = newX;
                player.y = newY;
                moves++;
                movesElement.textContent = moves;
                
                drawMaze();
                
                // 检查是否到达终点
                if (player.x === end.x && player.y === end.y) {
                    clearInterval(timerInterval);
                    winTime.textContent = timer;
                    winMoves.textContent = moves;
                    winMessage.style.display = 'block';
                }
                
                return true;
            }
            
            // 事件监听
            document.addEventListener('keydown', (e) => {
                switch(e.key) {
                    case 'ArrowUp':
                    case 'w':
                    case 'W':
                        movePlayer(0, -1);
                        break;
                    case 'ArrowDown':
                    case 's':
                    case 'S':
                        movePlayer(0, 1);
                        break;
                    case 'ArrowLeft':
                    case 'a':
                    case 'A':
                        movePlayer(-1, 0);
                        break;
                    case 'ArrowRight':
                    case 'd':
                    case 'D':
                        movePlayer(1, 0);
                        break;
                }
            });
            
            upBtn.addEventListener('click', () => movePlayer(0, -1));
            downBtn.addEventListener('click', () => movePlayer(0, 1));
            leftBtn.addEventListener('click', () => movePlayer(-1, 0));
            rightBtn.addEventListener('click', () => movePlayer(1, 0));
            
            newGameBtn.addEventListener('click', initGame);
            playAgainBtn.addEventListener('click', initGame);
            difficultySelect.addEventListener('change', initGame);
            
            // 触摸支持
            let touchStartX, touchStartY;
            
            canvas.addEventListener('touchstart', (e) => {
                touchStartX = e.touches[0].clientX;
                touchStartY = e.touches[0].clientY;
                e.preventDefault();
            }, { passive: false });
            
            canvas.addEventListener('touchmove', (e) => {
                e.preventDefault();
            }, { passive: false });
            
            canvas.addEventListener('touchend', (e) => {
                const touchEndX = e.changedTouches[0].clientX;
                const touchEndY = e.changedTouches[0].clientY;
                
                const dx = touchEndX - touchStartX;
                const dy = touchEndY - touchStartY;
                
                // 确定滑动方向
                if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 10) {
                    // 水平滑动
                    if (dx > 0) {
                        movePlayer(1, 0); // 右
                    } else {
                        movePlayer(-1, 0); // 左
                    }
                } else if (Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 10) {
                    // 垂直滑动
                    if (dy > 0) {
                        movePlayer(0, 1); // 下
                    } else {
                        movePlayer(0, -1); // 上
                    }
                }
                
                e.preventDefault();
            }, { passive: false });
            
            // 初始化游戏
            initGame();
        });
    </script>
</body>
</html>